<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_SVG-创建html-js方式</title>
  <!-- 
  SVG（可缩放矢量图形，Scalable Vector Graphics）是一种用于描述二维图形的图像格式，基于 XML（可扩展标记语言）。
  1. 基本概念
  - 矢量图形：与位图（如 JPEG、PNG）不同，SVG 是基于矢量的，这意味着它是由数学公式定义的形状（如线条、曲线和多边形），而不是由像素组成的。这使得 SVG 图形可以无损缩放到任意大小。

  2. 优点
  - 可缩放性：SVG 图形可以在不同的分辨率和尺寸下保持清晰，不会失真。
  - 文件大小：对于复杂的图形，SVG 文件通常比位图文件小，因为它们只存储形状和颜色的信息，而不是每个像素的颜色值。
  - 可编辑性：由于 SVG 是基于文本的 XML 格式，可以使用文本编辑器直接编辑 SVG 文件。
  - 交互性和动画：SVG 支持 CSS 和 JavaScript，可以实现动态效果和交互。

  3. 基本结构
  一个简单的 SVG 文件的基本结构如下：
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
  -  width  和  height  属性定义了 SVG 图形的宽度和高度。
  -  circle  元素表示一个圆， cx  和  cy  定义圆心的坐标， r  定义半径， fill  属性指定填充颜色。

  4. 常用元素
  -  <rect> ：绘制矩形。
  -  <circle> ：绘制圆形。
  -  <ellipse> ：绘制椭圆。
  -  <line> ：绘制直线。
  -  <polygon> ：绘制多边形。
  -  <path> ：绘制复杂的形状和曲线。

  5. 样式和动画
  - SVG 可以通过 CSS 进行样式设置，例如设置填充颜色、边框等。
  - 可以使用 SMIL（同步多媒体集成语言）或 CSS 动画来实现 SVG 动画效果。

  6. 浏览器支持
  SVG 是一种标准格式，现代浏览器（如 Chrome、Firefox、Safari 和 Edge）都支持 SVG 文件的显示和操作。

  7. 总结
  SVG 是一种强大且灵活的图形格式，适用于图标、图表、插图等多种应用场景。由于其可缩放性、可编辑性和与 CSS/JavaScript 的兼容性，SVG 在现代 Web 开发中得到了广泛应用。
  -->
</head>
<body>

  <h3>1. html创建svg</h3>
  <svg
    width="200"
    height="200"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
  </svg>

  <h3>2. js创建svg</h3>
  <div class="js-svg"></div>

  <script>
    window.onload = function () {
      // 1.创建svg 和 rect 元素
      const xmlns = "http://www.w3.org/2000/svg";
      const svgEl = document.createElementNS(xmlns, "svg");
      const rectEl = document.createElementNS(xmlns, "rect");

      // 2.给svg 和 rect 元素对象添加属性
      svgEl.setAttributeNS(null, "version", "1.0");
      svgEl.setAttributeNS(null, "width", "200");
      svgEl.setAttributeNS(null, "height", "200");
      
      rectEl.setAttributeNS(null, "width", "100");
      rectEl.setAttributeNS(null, "height", "100");
      rectEl.setAttributeNS(null, "fill", "blue");

      // 3.将rect 元素对象添加到svg 元素对象中
      svgEl.appendChild(rectEl);
      // 4.将svg 元素对象添加到页面中
      document.querySelector(".js-svg").appendChild(svgEl);
    }

  </script>
  
</body>
</html>